const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const os = require('os');
const threads = os.cpus().length;

module.exports = {
  // 入口 || 多入口
  mode: 'development', // 或者 'production'
  devtool: 'eval-cheap-module-source-map',//development环境配置sourceMap
  entry: {
    main: "./src/index.js",
  },
  module: {
    rules: [
      {
        oneOf: [{
          test: /\.css$/,
          use: [
            'style-loader',
            'css-loader',
          ],
        },
        {
          test: /\.less$/,
          // 执行顺序 从右到左 从下到上
          use: [
            'style-loader',
            'css-loader',
            'less-loader',
          ],

        },
        {
          test: /\.s[ac]ss$/,
          // 执行顺序 从右到左 从下到上
          use: [
            'style-loader',
            'css-loader',
            'sass-loader',
          ],

        },
        {
          // 会转base64
          test: /\.(png|jpe?g|gif|webp|svg)$/,
          type: 'asset',
          parser: {
            dataUrlCondition: {
              // 小于nkb的图片转base64  不需要使用file-loader和url-loader 
              maxSize: 2 * 1024
            }
          },
          generator: {
            filename: 'images/[hash:10][ext]'
          }
        },
        {
          // 不会转base64
          test: /\.(ttf|woff2?|mp3|mp4|avi)$/,
          type: 'asset/resource',
          parser: {
            dataUrlCondition: {
              // 小于nkb的图片转base64  不需要使用file-loader和url-loader
              maxSize: 2 * 1024
            }
          },
          generator: {
            filename: 'fonts/[hash:10][ext]'
          }
        },
        {
          test: /\.js$/,
          // exclude: /(node_modules)/,// exclude排除
          include: path.resolve(__dirname, '../src'),
          use: [
            {
              loader: 'thread-loader',// 开启多进程
              options: {
                Worker: threads // 开启进程数量
              }
            },
            {
              loader: 'babel-loader',
              options: {
                cacheDirectory: true,
                cacheCompression: false
              },

            },
          ]
        },]
      }
    ]
  },
  plugins: [new HtmlWebpackPlugin(
    {
      // html模板
      template: path.resolve(__dirname, '../src/develop.html')
    }
  )],
  devServer: {
    port: 5000, //打开的端口
    hot: true,
  },
  output: {
    path: undefined,// 开发模式不需要输出
    filename: 'js/bundle.js' // 将 JavaScript 文件打包到 "dist/js" 文件夹中
  }
};